.header {
	.site-topbar {
		height: 40px;
		background-color: #333;
		line-height: 40px;
		position: relative;
		z-index: 10;

		.container {
			display: flex;
			justify-content: space-between;
			font-size: 12px;

			.topbar-nav {
				// 占据剩余空间
				flex: 1;

				& > ul {
					display: flex;

					& > li {
						margin-right: 15px;

						& > a {
							color: #ccc;
							display: block;

							&:hover {
								color: #fff;
							}
						}

						// 注意点：空出小箭头的位置
						&.submenu {
							position: relative;
							// 空出小箭头的位置
							padding-right: 14px;
						}

						// 小箭头（虚线）
						&.submenu::after {
							content: '';
							display: block;
							position: absolute;
							top: 50%;
							right: 2px;
							// 主要代码
							width: 5px;
							height: 5px;
							border: 1px solid #ccc;
							border-left-color: transparent;
							border-top-color: transparent;

							// 向上移动-5px，然后旋转45度（注意书写顺序）
							transform: translateY(-5px) rotate(45deg);
							// 过渡动画
							transition: transform 0.3s;
						}

						// 鼠标移入li时，小箭头旋转朝上
						&.submenu:hover::after {
							transform: translateY(0) rotate(225deg);
							border-color: #fff;
							border-left-color: transparent;
							border-top-color: transparent;
						}

						// 实心三角形
						&.active::before {
							content: '';
							// 主要代码（默认宽高为0）
							border: 5px solid transparent;
							border-bottom-color: #fff;

							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(calc(-50% - 5px));

							// 默认隐藏
							display: none;
						}

						// 鼠标移入li时，显示实心三角形
						&.active:hover::before {
							display: block;
						}

						// 云服务的下拉列表
						&.active .submenu-list {
							position: absolute;
							top: 40px;
							left: 50%;
							transform: translateX(-50%);
							width: 105px;
							background-color: #fff;
							box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);

							// 默认高度为0，隐藏
							height: 0;
							overflow: hidden;
							transition: height 0.3s;

							ul {
								display: flex;
								flex-direction: column;
								line-height: 30px;

								li {
									// width: max-content;

									img {
										width: 16px;
										height: 16px;
										margin: 0 4px 0 6px;
										vertical-align: middle;
										position: relative;
										top: -1px;
									}

									a {
										color: #ccc;
										display: block;
									}

									a:hover {
										color: #ff6a00;
									}
								}
							}
						}

						&.active:hover .submenu-list {
							height: 150px;
						}

						// 下载APP的下拉
						&.active .appcode {
							position: absolute;
							top: 40px;
							left: 50%;
							transform: translateX(-50%);

							text-align: center;
							font-size: 14px;
							width: 124px;
							height: 148px;
							background-color: #fff;
							box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);

							transition: height 0.3s;
							// 默认高度为0，隐藏
							height: 0;
							overflow: hidden;

							img {
								width: 87px;
								height: 87px;
								display: block;
								margin: 17px auto 0;
							}
						}

						&.active:hover .appcode {
							height: 148px;
						}
					}
				}
			}

			// 登录、注册、消息
			.topbar-info {
				display: flex;
				a {
					color: #ccc;
					display: block;
					margin-right: 15px;

					&:hover {
						color: #fff;
					}
				}
			}

			// 购物车
			.topbar-cart {
				width: 120px;
				text-align: center;

				position: relative;

				a.cart-mini {
					height: 40px;
					color: #ccc;
					background-color: #424242;
					display: block;
					transition: background 0.2s, color 0.2s;

					em {
						position: relative;
						top: 1px;
					}
				}

				&:hover .cart-mini {
					background-color: #fff;
					color: #ff6a00;
				}

				// 购物车的下拉菜单
				.cart-menu {
					position: absolute;
					right: 0;
					top: 40px;
					z-index: 10;

					width: 316px;
					// height: 100px;
					background-color: #fff;
					box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);
					text-align: center;
					line-height: 100px;
					// 默认隐藏
					height: 0;
					overflow: hidden;
					transition: height 0.3s;
				}

				&:hover .cart-menu {
					height: 100px;
				}
			}
		}
	}

	// 网站头部
	.site-header {
		.container {
			height: 100px;
			display: flex;
			justify-content: space-between;

			.header-logo {
				margin-top: 23px;

				img {
					transition: transform 0.3s;
				}

				// 当鼠标按下时，使logo缩小0.9倍。
				// 这里因为logo被a标签包裹，所以可以使用a:active伪类选择器（当a元素处于按下按键未松开时被选中）
				a:active img {
					transform: scale(0.9);
				}
			}

			.header-nav {
				// 占据剩余空间
				flex: 1;
				margin-left: 194px;

				.nav-list {
					display: flex;
					line-height: 100px;

					li {
						margin-right: 20px;

						a {
							display: block;
							color: #333;

							&:hover {
								color: #ff6a00;
							}
						}
					}
				}
			}

			// 搜索框
			.header-search {
				width: 297px;
				margin-top: 25px;
				position: relative;

				// 搜索框
				.search-text {
					width: 245px;
					height: 50px;
					border: 1px solid #e0e0e0;
					// 去除input右边的边框，让按钮添加四个边的边框
					border-right: none;
					font-size: 14px;
					padding: 0 11px;
					transition: border 0.3s;
				}

				// 按钮
				.search-btn {
					position: absolute;
					top: 0;
					right: 0;
					display: inline-block;

					width: 55px;
					height: 50px;
					background-color: #fff;
					color: #333;

					text-align: center;
					line-height: 50px;
					font-size: 18px;
					border: 1px solid #e0e0e0;

					transition: border 0.3s, background 0.3s, color 0.3s;
				}

				// 鼠标移入header-search时，改变所有边框颜色
				&:hover .search-text {
					border-color: #9d9999;
				}
				&:hover .search-btn {
					border-color: #9d9999;
				}

				// 鼠标移入搜索按钮时，改变背景色、字体颜色、边框颜色
				& .search-btn:hover {
					background-color: #ff6a00;
					color: white;
					border-color: #ff6a00;
				}

				// 搜索框被激活时，改变所有边框颜色
				& .search-text:focus {
					border-color: #ff6a00;
				}
				& .search-text:focus ~ .search-btn {
					border-color: #ff6a00;
				}
			}
		}
	}
}

// focus-slider start
.focus-slider {
	position: relative;
	height: 460px;
	margin-bottom: 26px;
	.category {
		width: 234px;
		height: 460px;
		background: rgba(105, 101, 101, 0.6);

		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;

		& > ul {
			position: relative;
			padding: 20px 0;

			& > li {
				line-height: 42px;
				padding: 0 24px 0 30px;

				a {
					display: flex;
					justify-content: space-between;
					color: #fff;

					em {
						position: relative;
						top: -1px;
					}
				}

				&:hover {
					background-color: #ff6a00;
				}

				// css实现tab栏切换
				.category-list {
					position: absolute;
					top: 0;
					left: 234px;

					width: 992px;
					height: 460px;
					background-color: #fff;
					padding: 20px 25px;

					// 默认隐藏
					display: none;

					& > ul {
						display: flex;
						flex-wrap: wrap;
						font-size: 14px;
						height: 420px;
						align-content: space-between;

						li {
							width: calc(100% / 4);
							line-height: 38px;

							img {
								width: 29px;
								height: 38px;
								margin-right: 10px;
							}
						}
					}
				}

				// 鼠标滑过，使对应的category-list显示
				&:hover .category-list {
					display: block;
				}
			}
		}
	}

	.swiper {
		width: 1226px;
		height: 460px;
		background-color: orange;

		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		overflow: hidden;

		// 左右箭头
		.swiper-button-prev {
			left: 244px;

			&::after {
				content: '';
			}
		}

		.swiper-button-next {
			&::after {
				content: '';
			}
		}

		.swiper-button {
			width: 41px;
			height: 69px;
			// border: 1px solid red;
			background-image: url(../images/左箭头.png);
			background-repeat: no-repeat;
			background-position: center;

			&:hover {
				background-image: url(../images/jiantou.png);
				background-repeat: no-repeat;
				background-position: 0 0;
			}
		}

		.swiper-button:nth-of-type(2) {
			background-image: url(../images/右箭头.png);

			&:hover {
				background-image: url(../images/jiantou.png);
				background-repeat: no-repeat;
				background-position: -42px 0;
			}
		}

		// 小圆点
		.swiper-pagination {
			text-align: right;
			height: 20px;
			padding-right: 34px;
			bottom: 26px;
		}
	}
}
// focus-slider end

// recommend start
.recommend {
	padding: 26px 0 36px 0;
	background-color: #f7f7f7;

	// 歌曲推荐上面的banner图
	.index_banner {
		img {
			width: 1226px;
			height: 120px;
		}
	}

	// 歌曲推荐
	.music-recommend {
		h2 {
			font-size: 32px;
			margin-top: 48px;
			text-align: center;
			color: #333;
		}

		// tab选项
		.m-tab {
			display: flex;
			justify-content: center;
			margin: 34px 0 36px;

			a {
				font-size: 16px;
				color: #333;
				padding: 0 28px;

				&.active,
				&:hover {
					color: #31c27c;
				}
			}
		}

		.m-list {
			// 选项卡对应的内容
			.m-item {
				// 默认隐藏
				display: none;

				// 拥有active类名的m-item显示
				&.active {
					display: flex;
					justify-content: space-between;
				}

				& > li > a {
					display: block;
					width: 224px;
					height: 224px;
					overflow: hidden;
					position: relative;

					img {
						width: 100%;
						height: 100%;
						transition: transform 0.3s;
					}

					// 遮罩层
					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						width: 224px;
						height: 224px;
						background-color: rgba(0, 0, 0, 0.3);
						// 默认隐藏
						transition: opacity 0.3s;
						opacity: 0;
					}

					// 播放按钮
					&::after {
						content: '';
						width: 67px;
						height: 67px;
						background-image: url(../images/play.png);
						position: absolute;
						z-index: 2;
						top: 50%;
						left: 50%;
						// transform: translate(-50%, -50%);
						margin: -33.5px 0 0 -33.5px;
						// 先缩小按钮，鼠标移入时再放大
						transform: scale(0.2);
						// 默认隐藏
						transition: opacity 0.3s, transform 0.3s;
						opacity: 0;
					}

					&:hover img {
						transform: scale(1.1);
					}

					&:hover::after,
					&:hover::before {
						opacity: 1;
					}

					&:hover::after {
						transform: scale(1);
					}
				}

				// 下面的文本
				.m-item-title a {
					color: #333;
					display: block;
					margin: 14px 0 6px;
					width: 224px;
					// 文字溢出显示省略号
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

					&:hover {
						color: #31c27c;
					}
				}

				.m-item-other {
					color: #999;
				}
			}
		}
	}
}
// recommend end
